<template>
  <div class="col-header-view">
    <div class="header-view-title">
      <i v-if="isShowImportantLevel" :class="[importantLevelIcon, 'level-icon']"></i>
      <span :title="businessData.summary.showTitle">{{ businessData.summary.showTitle }}</span>
    </div>
    <div class="flex-center header-view-content">
      <span v-if="isShowPermission" class="header-view-permission">{{ businessData.nodePolicy.nodePolicyName }}</span>
      <span class="sender" @click="showBaseInfo(businessData.senderUser.id)">{{ businessData.senderUser.name }}</span>
      <span>{{ getDateString(businessData.summary.createDate) }}</span>
      <template v-if="isShowFileSummary">
        <i class="split" />
        <div class="flex-center file-summary-wrapper" @click="handleToggleExpand">
          <section v-if="isShowAtta">
            <span>{{ $i18n('common.attachment.label') }}</span>
            <span>({{ attachments.atts.length }})</span>
          </section>
          <span v-if="isShowFileSplit">&nbsp;&&nbsp;</span>
          <section v-if="isShowDoc">
            <span>{{ $i18n('common.toolbar.insert.mydocument.label') }}</span>
            <span>({{ relationDocs.atts.length }})</span>
          </section>
          <FileExpandBtn
            :isExpand="isExpand"
            :isShowText="false"
            class="expand-wrapper"
          />
        </div>
      </template>
    </div>
    <div v-if="isShowReceiver" class="header-view-receiver">
      <span>{{ $i18n('common.receiving.member.label') }}：</span>
      <a-tooltip :title="receiver" placement="bottom">
        <template v-for="(item, index) in businessData.receiverUsers">
          <span
            v-if="item.orgType === 'user'"
            :key="item.nodeId"
            class="receiver"
            @click="showBaseInfo(item.id)"
          >
            {{ item.nodeName }}
          </span>
          <span
            v-else
            :key="item.nodeId"
            class="receiver-group"
            @click="showNodeInfo(item)"
          >
            {{ item.nodeName }}
          </span>
          {{ index === isShowReceiver - 1 ? '' : '、' }}
        </template>
      </a-tooltip>
    </div>
    <FileList
      v-show="isExpand"
      :isDisplayHeader="false"
      :attachments="attachments.atts"
      :relationDocs="relationDocs.atts"
      :isCreated="false"
    />
    <!-- 跟踪的弹窗     -->
    <TrackModal  />
  </div>
</template>

<script>
  import globalMethods from '@/plugins/methods';
  import { useBaseInfoStore } from '@/store/modules/base-info.js';
  import {mapState} from 'pinia';
  import globalData from "@/plugins/data";
  import {showBaseInfo} from "@/helper/people-card";
  import TrackModal from "@/handles/handle-list/summary/modules/track/index.vue";
  import FileExpandBtn from '@/components/file-expand-btn';
  import FileList from '@/components/classic-layout/summary/file-new';

  export default {
    name: 'headerView',
    components: {
      TrackModal,
      FileExpandBtn,
      FileList,
    },
    data() {
      return {
        isExpand: false,
      };
    },
    methods: {
      showBaseInfo,
      showNodeInfo(item) {
        const {nodeId, nodeName} = item;
        if(!nodeId){
          return;
        }
        const dialog = globalMethods.dialog({
          url: `${globalData.ctxPath}/collaboration/collaboration.do?method=showNodeMembers&summaryId=${this.businessData.summary.id}&nodeId=${nodeId}`,
          title: nodeName,
          width: 440,
          height: 400,
          transParams: "",
          footer: null,
          bodyStyle: 'padding:2px',
          onCancel() {
            dialog.close();
          }
        });
      },
      handleToggleExpand() {
        this.isExpand = !this.isExpand;
      },
    },
    created() {
      this.getDateString = globalMethods.getDateString;
    },
    computed: {
      ...mapState(useBaseInfoStore,[
        'businessData',
        'attachments',
        'relationDocs',
      ]),
      headerIcon: () => globalData.isCap4 ? 'vp-collaboration' : 'vp-ziyouxietong',
      // 是否显示重要等级
      isShowImportantLevel() {
        const { importantLevel } = this.businessData.summary;

        if (importantLevel && importantLevel !== 1) return true;

        return false;
      },
      // 重要等级图标
      importantLevelIcon() {
        return `ico16 important${this.businessData.summary.importantLevel}_16`;
      },
      isShowAtta() {
        return this.attachments.atts.length;
      },
      isShowDoc() {
        return this.relationDocs.atts.length;
      },
      isShowFileSummary() {
        return this.isShowAtta || this.isShowDoc;
      },
      isShowFileSplit() {
        return this.isShowAtta && this.isShowDoc;
      },
      isShowReceiver() {
        return this.businessData.receiverUsers.length;
      },
      isShowPermission() {
        return this.businessData.other && this.businessData.other.hasDealArea;
      },
      receiver() {
        return this.isShowReceiver
          ? this.businessData.receiverUsers.map(item => item.nodeName).join('、')
          : '';
      },
    }
  };
</script>

<style lang="scss" scoped>
  .col-header-view {
    .header-view-title {
      display: flex;
      align-items: center;
      span {
        display: inline-block;
        
        &:last-child {
          font-size: 16px;
          font-weight: 600;

          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          vertical-align: middle;
        }
      }

      > .level-icon {
        margin-right: 4px;
      }
    }
    
    .flex-center {
      display: flex;
      align-items: center;
    }

    > .header-view-content {
      margin-top: 4px;
      color: #666;

      > .header-view-permission {
        font-size: 12px;
        background-color: var(--theme-brand2, #E5F1FF);
        color: var(--theme-brand6, #1890FF);
        margin-right: 8px;
        padding: 0 5px;
        border-radius: 2px;
        height: 18px;
        line-height: 18px;
      }

      > .sender {
        margin-right: 10px;

        &:hover {
          cursor: pointer;
          color: #1889ff;
        }
      }

      > .split {
        width: 1px;
        height: 12px;
        background-color: #e4e4e4;
        margin: 0 20px;
      }

      > .file-summary-wrapper {
        color: #1889ff;
        color: var(--theme-brand6, #1889ff);

        &:hover {
          cursor: pointer;

          > .expand-wrapper {
            color: #1889ff;
            color: var(--theme-brand6, #1889ff);
          }
        }

        > .expand-wrapper {
          margin-left: 6px;
        }
      }
    }

    .header-view-receiver {
      margin-top: 4px;
      color: #666;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      .receiver:hover {
        cursor: pointer;
        color: #1889ff;
        color: var(--theme-brand6, #1889ff);
      }

      .receiver-group:hover {
        cursor: pointer;
        color: #0077ff;
        color: var(--theme-brand6, #0077ff);
      }
    }
  }
</style>
